<template>
  <teleport to="body">
    <!--transition mode="out-in">
      <div class="modal" v-if="isshow" @click="hide">
        <div class="modal-inner">
          测试CTest
        </div>
      </div>
    </transition-->
    <my-transition mode="out-in" :value="isshow" name="fade" :customStyle="customStyle" @before-enter="onBeforeEnter" @enter="onEnter" @after-enter="onAfterEnter" @after-leave="onAfterLeave" @leave="onLeave">
      <div class="modal" @click="hide">
        <div class="modal-inner">
          测试CTest
        </div>
      </div>
    </my-transition>
  </teleport>
</template>
<script>
import MyTransition from './arm-liang-transition/arm-liang-transition.vue'
export default{
  components : {
    MyTransition
  },
  data(){
    return {
      isshow : false,
      customStyle : {
        position : 'relative',
        'z-index' : 10
      }
    }
  },
  methods : {
    show(){
      this.isshow = true;
    },
    hide(){
      this.isshow = false;
    },
    onLeave(){
      console.log(`离开中`);
    },
    onAfterLeave(){
      console.log(`离开完成`);
    },
    onBeforeEnter(){
      console.log(`进入之前`);
    },
    onBeforeLeave(){
      console.log(`离开之前`);
    },
    onEnter(){
      console.log(`进入了`);
    },
    onAfterEnter(){
      console.log(`进入完成`);
    },
  }
}
</script>
<style type="text/css" lang="scss">
  .modal{
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background:rgba(0,0,0,0.3);
    &-inner{
      position:absolute;
      width:300px;
      height:300px;
      background:#fff;
    }
  }
</style>
